<template>
  <div class="recommended">
    <el-row>
      <el-col :span="12" class="el-col-one">
        <div>
          <h4>限时秒杀<span class="subheading">查看更多 ></span></h4>
        </div>
        <div class="content" style="margin-top: 0px">
          <el-row>
            <Countdown></Countdown>
            <el-col v-for="item in killList" :key="item.src" :span="8">
              <img style="width: 100%" :src="item.src" :alt="item.alt" />
              <p style="color: red; font-size: 15px; font-weight: 600">￥{{ item.price }}</p>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <h4>优惠拼购<span class="subheading">查看更多 ></span></h4>
        <div class="content" style="padding: 10px 0px">
          <el-row v-for="item in togetherList" :key="item.src">
            <div style="width: 30%">
              <img style="width: 100%" :src="item.src" :alt="item.alt" />
            </div>
            <div style="width: 70%">
              <div style="width: 100%; padding-left: 6px">
                <h4>{{ item.title }}</h4>
                <el-progress :text-inside="false" :stroke-width="6" :percentage="item.percentage" color="#f56c6c"></el-progress>
              </div>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Countdown from './Countdown'
let killList = ref([
  {
    src: '//img14.360buyimg.com/mobilecms/s220x220_jfs/t1/170159/16/9538/101686/6041c653Ec42f0346/45b69a3bb354c561.jpg!cc_220x220!q70.dpg.webp',
    alt: '格力（GREE）1.5匹 云恬 新一级能效 变频 自清洁 智能 壁挂式空调挂机(KFR-35GW/NhAe1BG珊瑚玉)',
    price: '6.6'
  },
  {
    src: '//img14.360buyimg.com/mobilecms/s220x220_jfs/t1/170159/16/9538/101686/6041c653Ec42f0346/45b69a3bb354c561.jpg!cc_220x220!q70.dpg.webp',
    alt: '格力（GREE）1.5匹 云恬 新一级能效 变频 自清洁 智能 壁挂式空调挂机(KFR-35GW/NhAe1BG珊瑚玉)',
    price: '6.6'
  },
  {
    src: '//img14.360buyimg.com/mobilecms/s220x220_jfs/t1/170159/16/9538/101686/6041c653Ec42f0346/45b69a3bb354c561.jpg!cc_220x220!q70.dpg.webp',
    alt: '格力（GREE）1.5匹 云恬 新一级能效 变频 自清洁 智能 壁挂式空调挂机(KFR-35GW/NhAe1BG珊瑚玉)',
    price: '6.6'
  }
])
let togetherList = ref([
  {
    src: '//img10.360buyimg.com/mobilecms/s372x372_jfs/t1/162431/6/8778/99683/603e1419E1a18f132/75ec38801c069e7e.jpg!q70.dpg.webp',
    alt: '唯一（Winy）999纯银项链女士时尚饰品锁骨链跳动的心吊坠银饰首饰礼盒三八妇女节送女神情侣生日礼物 精美玫瑰花礼盒包装',
    title: '全场只要6.6',
    percentage: 66
  },
  {
    src: '//img10.360buyimg.com/mobilecms/s372x372_jfs/t1/162431/6/8778/99683/603e1419E1a18f132/75ec38801c069e7e.jpg!q70.dpg.webp',
    alt: '唯一（Winy）999纯银项链女士时尚饰品锁骨链跳动的心吊坠银饰首饰礼盒三八妇女节送女神情侣生日礼物 精美玫瑰花礼盒包装',
    title: '看看不要钱',
    percentage: 99
  }
])
</script>

<style lang='less' scoped>
img {
  border: 1px solid #e1e1e1;
}
/deep/.el-progress__text {
  min-width: 0px !important;
}

.recommended {
  margin-top: 10px;
  background-color: white;
  border-radius: 8px;
  .el-col-one {
    border-right: 1px solid #e1e1e1;
  }
  .el-col {
    padding: 10px;
    .subheading {
      line-height: 20.8px;
      font-weight: 500;
      font-size: 11px !important;
      color: blue;
      float: right;
    }
    .content {
      margin-top: 5px;
      .el-col {
        padding: 5px;
        text-align: center;
      }
    }
  }
}
</style>
